<template>
  <div class="padding">
    <a-card class="margin-bottom" size="small" :bordered="false">
      <order-search/>
    </a-card>
    <a-card :bordered="false">
      <div class="flex-between margin-bottom">
        <a-space>
          <router-link to="/order/create">
            <a-button type="primary"><plus-outlined/>业务开单</a-button>
          </router-link>
          <a-dropdown>
            <a-button>批量<down-outlined class="font-size-sm"/></a-button>
          </a-dropdown>
        </a-space>
        <a-space size="middle">
          <a-tooltip title="刷新"><reload-outlined class="font-size-lg"/></a-tooltip>
          <a-tooltip title="密度"><column-height-outlined class="font-size-lg"/></a-tooltip>
          <a-tooltip title="列设置"><setting-outlined class="font-size-lg"/></a-tooltip>
        </a-space>
      </div>

      <a-table :row-selection="{}" :columns="columns" :data-source="data">

      </a-table>
      <use-pagination :total="1500" position="center"/>
    </a-card>
  </div>

</template>

<script setup lang="ts">
import {
    SettingOutlined,
    ReloadOutlined,
    ColumnHeightOutlined,
    DownOutlined,
  PlusOutlined} from '@ant-design/icons-vue'
import UsePagination from "@/components/UsePagination.vue";
import OrderSearch from "@/views/order/components/OrderSearch.vue";
import type {TableColumnsType} from "ant-design-vue";
import {onMounted, ref} from "vue";

let data = ref<OrdersType[]>()

const columns:TableColumnsType = [
  {key:'order_id',title:'编号',width:120},
  {key:'customer_name',title:'客户名称'},
  {key:'counts',title:'数量',width:80,sorter:(a,b)=> a.counts - b.counts},
  {key:'total',title:'金额',width:100,sorter:(a,b)=> a.total - b.total},
  {key:'sale',title:'业务员',width:120},
  {key:'create_time',title:'日期',width:160,sorter:(a,b)=> a.create_time - b.create_time},
  {key:'status',title:'状态',width:120},
  {key:'action',title:'管理',width:200},
]

const getData = async ()=>{

}
onMounted(()=>{
  getData()
})
</script>

<style scoped>

</style>